<template>
	<view class="page-mine-container">
		<view class="user-login" v-if="!isLogin" @click="doLogin">
			去登录
		</view>
		<view class="user-info" v-else>
			<view class="avatar">
				<up-avatar size="80" :src="userInfo.avatarUrl" @click="checkLogin()"></up-avatar>
			</view>
			<view class="user">
				{{ userInfo.nickName }}
			</view>
			<!-- <view @click="onEdit" class="edit"> 编辑 > </view> -->
		</view>
		<view class="line-item">
			<up-cell-group>
				<up-cell title="我的预约1" isLink url="/pages/yuyuehouse/yuyuehouse"></up-cell>
				<!-- <up-cell
          icon="file-text"
          title="我的预约"
		  @click="goPage('/pages/yuyuehouse/yuyuehouse')"
          arrow-direction="right"
        ></up-cell> -->
				<!-- <up-cell
          icon="order"
          title="发布列表"
          :isLink="true"
          arrow-direction="right"
        ></up-cell>
        <up-cell
          icon="star-fill"
          title="我的收藏"
          :isLink="true"
          arrow-direction="right"
        ></up-cell> -->
			</up-cell-group>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue';

	let userInfo = reactive(uni.getStorageSync('userInfo') || {});
	let isLogin = ref(false);

	function onEdit() {
		uni.navigateTo({
			url: '/pages/edit-user/edit-user',
		});
	}
	const checkLogin = () => {
		const token = uni.getStorageSync('token')
		if (!token) {
			isLogin.value = false
		} else {
			isLogin.value = true
		}
	}
	const doLogin = () => {
		uni.navigateTo({
			url: '/pages/Login/Login'
		})
	}
	// 检查登录状态
	const goPage = (url) => {
		console.log(url)
		uni.navigateTo({
			url
		})
	}

	function onClose() {
		isLogin.value = false;
	}

	onMounted(() => {
		checkLogin();
	});
</script>

<style lang="scss">
	.page-mine-container {
		padding: 0 30rpx;

		.user-login {
			height: 70rpx;
			line-height: 70rpx;
		}

		.user-info {
			display: flex;

			.user {
				width: 300rpx;
				margin-left: 30rpx;
				line-height: 80px;
			}

			.edit {
				line-height: 80px;
				flex: 1;
				color: blue;
				text-align: right;
				padding-right: 50rpx;
			}
		}

		.line-item {
			padding-top: 50rpx;
		}
	}
</style>